<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // this 是谁：谁调用就是谁. xxx.func()
      // 看不出来谁调用，一般是 window

      // 全局的变量都相当于是添加给了 window对象
      // 鸿蒙中没有这个对象
      function sayHi() {
        console.log('sayHi:', this)
      }
    //   sayHi()

      // 能够看出来谁调用
      const person = {
        name: '小李子',
        film: ['jump together'],
        skill: '不抗冻，不要跳冰水',
        // 给对象设置一个方法

        //普通函数
        sayHi() {
          console.log('sayHi', this)
        },

        //箭头函数
        sayHello: () => {
          console.log('sayHello', this)
        },

        sayHiPlus() {
          console.log('sayHiPlus', this) // this? person
          // setTimeout(function () {
          //   // 没有通过任何方式指定 this
          //   console.log('sayHiPlus', this) // this? window
          // }, 1000)
          setTimeout(() => {
            // 没有通过任何方式指定 this
            console.log('sayHiPlus', this ) // this? window
            setTimeout(() => {
              // 没有通过任何方式指定 this
              console.log('sayHiPlus', this) // this? window
              setTimeout(() => {
                // 没有通过任何方式指定 this
                console.log('sayHiPlus', this) // this? window
              }, 1000)
            }, 1000)
          }, 1000)
        },
      }

      // person点的，sayHi 中目前是 person
    //   person.sayHi()

      // sayHello 绑定的是 箭头函数
      // 箭头函数：创建时会绑定当前作用域中的 this，如果有的话
      // 当前作用域没有 this，向上一级去找，找到全局为止，还找不到。window
      // 常见的作用域：函数作用域。块级作用域，模块作用域，全局作用域
      // 类里面不是作用域
    //   person.sayHello()

      person.sayHiPlus()

      // 面试话术：
      /**
       * 聊到了 this，聊到了箭头函数。聊到了坑点
       * this 这个东西在JS 和 TS 中都很灵活，因为会动态的改变，但是有一些记忆的规则：
       *  谁调用就是谁，看不出来谁调用，一般是全局对象，如果实在浏览器中，这个对象是 window
       * 也有特殊情况，比如箭头函数，创建的时候 this 就绑定了，绑定的是上一级作用域中的 this，比如函数作用域，块级作用域，全局，模块。。
       * 箭头函数，在鸿蒙开发中经常需要使用，因为如果不指定 this 可能出现指向错误的问题，导致无法正常取值，buildParams 中，子通过回调函数传递数据给父组件，也需要通过箭头函数，这两个是比较常见的，我也掉过坑
       * 在 js 中早期还有一些更灵活的写法，比如 call，apply，bind，但是有了箭头函数之后一般不需要使用他们了。
       * 【下一句，看是否准备了】之前研究 this 指向的时候看过，还自己手写过
       * */
    </script>
  </body>
</html>
